Github Page Setup (1) 使用 Hexo + NexT

Posted on | Edited on | In | | Views:

What is Hexo ?

● Hexo
　簡單的來說，就是一個 Blog Framework，可以用 Markdown 語法寫 Blog，支援很多插件，可以加入 SEO，
　重點是方便部屬到 Github Pages。

安裝設定

● 需要先安裝: 　

Node.js
Git

● Install Hexo

npm install -g hexo-cli

● 這樣就完成了安裝，十分簡單。

● Start Hexo

hexo init <folder>
cd <folder>
hexo server

● 接著在瀏覽器裡輸入 localhost:4000，就可以看到你的 Blog 了。

目錄結構

● 整個Hexo目錄的架構基本如下

blog/
  _config.yml            -> 主要設定檔: 可以修改作者名稱，網站標題，語言等等
  package.json           -> 相依套件列表
  node_modules/          -> 相依套件
  public/                -> Hexo幫你自動生成的靜態網站放這
  source/
    _posts               -> 你寫的文章都放在這裡面
      hello-world.md     -> 文章
  themes/                -> 網站主題: 預設為 landscape
    landscape/
      _config.yml        -> 主題設定檔: 客製化頁面，網站連結等等
  scaffolds/
    draft.md
    page.md
    post.md

語言設定

● 修改 blog/_config.yml: 

language: zh-tw

主題設定 - NexT

● 用 Git 安裝 NexT

git clone https://github.com/iissnan/hexo-theme-next themes/next

● 修改 blog/_config.yml: 

theme: next

● Restart server

hexo server

Scheme 設定

● 在 theme/next/_config.yml 裡找到 schema ，把注釋去掉即可。

#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

動畫效果設定

● 在 themes/next/_config.yml 裡選擇要開啟的動畫效果，把值設定成 true 即可。

# Canvas-nest
canvas_nest: true
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

作者設定

● 創立 uploads 資料夾

mkdir source/uploads

● 接著將你的大頭照丟進source/uploads 裡面，再修改 themes/next/_config.yml: 

avatar: /uploads/head.jpg

● 修改作者名
　修改 blog/_config.yml: 

title: <標題>
subtitle: <副標題>
description: <描述>
author: <你的名字>

● 連接到社群網站
　修改 themes/next/_config.yml:

social:
  GitHub: https://github.com/liangsmfish || github
  E-Mail: mailto:xxxxx@gmail.com || envelope

設定 About 頁面

● Setup About Page

hexo new page "about"

● 修改 themes/next/_config.yml:

menu:
  home: /
  archives: /archives
  tags: /tags
  about: /about -> 把這行的註解去掉

　編輯 source/about/index.md 即可

加入搜尋功能

● 安裝搜尋套件 

npm install hexo-generator-searchdb --save

● 加入以下至 themes/next/_config.yml:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

第一篇 Post

● 創建 test 文章

hexo new post test

● 編輯source/_posts/test.md: 

---
title: 測試
date: 2019-01-12 15:02:30
tags:
categories:
---
This is a test post !!

● 完成!!

設定 Tags 以及 Categories

hexo new page "tags"
hexo new page "Categories"

● 編輯剛創立的頁面 source/_posts/tags/index.md 

title: All tags
date: 2019-01-12 17:20:34
type: "tags"

● 編輯剛創立的頁面 source/_posts/categories/index.md 

title: All tags
date: 2019-01-12 17:20:34
type: "categories"

● 編輯test.md:

---
title: 測試
date: 2019-01-12 17:22:30
tags:[test0,test1] -> 支援多個tags
categories:test
---
This is a test post !!

設定 Github Pages

● 可以準備要發布了。在自己的Github中先創建一個專案，名稱為 username.github.io。

Generate Static Files

$ hexo generate

● hexo會幫我們自動產生檔案到blog/public準備發布。

Deploy to Github.io

$ hexo deploy

● 在 username.github.io裡面就可以看到我們剛做的修改了。

0%